<template>
    <div class="pro-tips">
      <div class="msg-box">
        <i class="icon-succ" v-if="type === 'success'" ></i>
        <div class="msg"> {{msg}}</div>
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    props:{
        msg: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            required: false,
            default: 'success'
        }
    }
}
</script>

<style scoped lang="less">
.pro-tips{
    position:fixed;
    left:0px;
    bottom:50px;
    right:0px;
    top:250px;
    text-align: center;
    z-index:99999;
    transition:.1s all linear;
    animation:opacity .2s ease-in;
    .msg-box{
        display: flex;
        width: max-content;
        max-width:300px;
        // height: 60px;
        word-break: break-all;
        background: #23232A;
        box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.3);
        border-radius: 16px;
        padding:20px 28px;
        margin:0 auto;
        .icon-succ{
            width:20px;height:20px;
            background:url('../assets/pro/tips/tip_succ.svg') no-repeat;
            background-size:cover;
        }
        .msg{
            color:#fff;
            font-size:14px;
            margin-left:12px;
        }
    }
}

@keyframes opacity{
   0%{
    opacity:0;
   }
   50%{
    opacity:.5;
   }
   100%{
    opacity:1;
   }
}



</style>